<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">{{ $t("workOrder.ProcessedPageTitle") }}</div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="
              (pageQuery) => {
                pageQuery.result_code = 'dealed';
                pageQuery.search = searchItem;
                if (tableSearch) {
                  pageQuery.page = 1;
                  tableSearch = false;
                }
                if (AuthModule.authrole === 'system_admin') {
                  pageQuery.cloud_tenant_id = cloudTenantSearchId;
                }
                return $pandaApi.apiGetWorkorders(pageQuery);
              }
            "
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button
                  class="icon-button setting-button"
                  style="width: auto"
                  :disabled="tableSlotData.table.selectRows.length <= 0"
                  @click="
                    $refs.ApprovalDialop.init(
                      'again',
                      tableSlotData.table.selectRows
                    )
                  "
                >
                  <i class="el-icon-refresh-right" style="font-size: 14px"></i>
                  <span style="font-size: 12px">{{
                    $t("workOrder.HandleAgain")
                  }}</span>
                </el-button>
                <el-button
                  class="icon-button setting-button"
                  style="width: auto"
                  :disabled="tableSlotData.table.selectRows.length <= 0"
                  @click="batchDelete(tableSlotData.table.selectRows)"
                >
                  <i
                    class="iconfont iconzhongyiicon_shanchu"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{
                    $t("common.BatchDelete")
                  }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <tenant-user-select v-model="cloudTenantSearchId"></tenant-user-select>
                <el-input
                  :placeholder="$t('workOrder.PendingPageTableSearch')"
                  v-model="searchItem"
                  @keyup.enter.native="tableSearchChange(tableSlotData)"
                  style="width:200px"
                >
                </el-input>
                <el-button
                  @click="tableSearchChange(tableSlotData)"
                  type="primary"
                  style="margin-left: 10px"
                  >{{ $t("common.search") }}</el-button
                >
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column
                type="selection"
                width="40"
                align="center"
              ></el-table-column>
              <el-table-column :label="$t('workOrder.postTime')" width="180">
                <template #default="props">
                  <span>{{ parseTime(new Date(props.row.created_at)) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="$store.state.auth.authrole === 'system_admin'"
                prop="cloud_tenant_name"
                :label="$t('common.tenant')"
                width="180"
              >
                <!-- <template slot-scope="scope">
                  {{ initTenantName(scope.row.cloud_tenant_id) }}
                </template> -->
              </el-table-column>
              <el-table-column :label="$t('workOrder.postUser')" width="120">
                <template #default="props">
                  <span>{{ props.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('workOrder.theme')"
                :width="Language.get() === 'zh' ? '120' : '240'"
              >
                <template #default="props">
                  <span>{{
                    $t("workOrder.function." + props.row.function)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('workOrder.detail')" prop="arguments" width="80">
                <template #default="props">
                    <el-link slot="reference" style="font-size:12px" :underline="false" type="primary" @click="initData(props.row)">{{$t('common.details')}}</el-link>
                </template>
              </el-table-column>
              <el-table-column :label="$t('workOrder.handleUser')">
                <template #default="props">
                  <!-- <span>{{ initTenantName(props.row.cloud_tenant_id) }}</span> -->
                  <span>{{ props.row.admin_user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('workOrder.handleResult')">
                <template #default="props">
                  <span>{{
                    $t("workOrder.resultCode." + props.row.result_code)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('workOrder.resultDetail')"
                prop="result_detail"
              >
                <template #default="props">
                  <el-tooltip placement="left" width="200" trigger="hover">
                    <p slot="content" style="max-width:600px;margin:0px;padding:3px">{{ props.row.result_detail }}</p>
                    <el-link
                      :underline="false"
                      type="primary"
                      style="font-size: 12px"
                      >{{ delContext(props.row.result_detail) }}</el-link
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.action')" width="180">
                <template #default="props">
                  <link-button
                    :content="$t('workOrder.HandleAgain')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="$refs.ApprovalDialop.init('again', [props.row])"
                  />
                  <link-button
                    :content="$t('common.delete')"
                    :size="10"
                    :font-size="'12px'"
                    style="margin-right: 15px"
                    @click="deleteRow(props.row)"
                  />
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <approval-dialop
                ref="ApprovalDialop"
                :submit-method="
                  (type, items, approval_comments, approval_results) => {
                    const ids = items.map((row) => row.id);
                    return $pandaApi
                      .apiBatchHandleWorkorders(
                        ids,
                        type,
                        approval_comments,
                        approval_results
                      )
                      .then(() => {
                        tableSlotData.table.refresh();
                      });
                  }
                "
              />
              <delete-dialog
                ref="DeleteDialog"
                :delete-method="
                  (itemList) => {
                    return $pandaApi
                      .apiBatchDeleteWorkorder(itemList)
                      .then(() => {
                        tableSlotData.table.deleteRefresh(itemList.length);
                      });
                  }
                "
              />
              <order-details ref="OrderDetails"></order-details>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import BasicTable from "../../components/Basic/Table/BasicTable.vue";
import LinkButton from "../../components/Basic/Button/LinkButton.vue";
import { Language } from "../../utils/auth";
import { parseTime } from "../../utils";
import KeyValue from "../../components/Basic/KeyValue/KeyValue.vue";
import ApprovalDialop from "./components/ApprovalDialop.vue";
import DeleteDialog from "./components/DeleteDialog.vue";
import { AuthModule } from "../../store/modules/auth";
import OrderDetails from "./components/OrderDetails.vue";
import TenantUserSelect from "../../components/Basic/Select/tenant-users-select.vue"
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    KeyValue,
    ApprovalDialop,
    DeleteDialog,
    OrderDetails,
    TenantUserSelect
  },
  computed: {
    Language: () => Language,
    parseTime: () => parseTime,
    AuthModule: () => AuthModule,
  },
  data() {
    return {
      replyLoading: false, // 答复
      hangUpLoading: false, // 挂起
      reportLoading: false, // 上报
      cloudTenantLoading: false, // 云租户loading
      cloudTenantSearchId: '',
      tenantList: [],
      searchItem: "",
      tableSearch: false,
    };
  },
  // mounted() {
  //   this.cloudTenantLoading = true;
  // },
  methods: {
    initData(data: any) {
      let res = JSON.parse(JSON.stringify(data));
      (this as any).$refs.OrderDetails.init(res);
    },

    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    delContext(str: any) {
      if (str.length > 20) {
        return str.substr(0, 20) + "...";
      }
      return str;
    },
    // initTenantName(id: any) {
    //   for (let i in (this as any).tenantList) {
    //     if (id === (this as any).tenantList[i].id) {
    //       return (this as any).tenantList[i].name;
    //     }
    //   }
    //   return;
    // },
    batchDelete(selectRows: any) {
      (this as any).$refs.DeleteDialog.init({
        title: (this as any).$t("workOrder.deleteReportSelectedTips"),
        itemList: selectRows,
      });
    },
    deleteRow(row: any) {
      (this as any).$refs.DeleteDialog.init({
        title: (this as any).$t("workOrder.deleteReportTips"),
        itemList: [row],
      });
    },
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
